<template>
  <div id="photo-det">
    <div class="photo-title">
      <div class="photo-name">{{albumName}}</div>
      <div class="photo-desc">{{albumDesc}}</div>
    </div>
    <div class="photo-butt">
      <el-button>批量删除</el-button>
    </div>
    <div class="photo-list">
      <div class="photo-upload">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog v-model="dialogVisible" size="tiny">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </div>
      <div class="photo-display" v-for="item in photo.list">
        <p id="one-photo">
        <img :src="item.photoLink">
        <el-button type="primary" @click="photoDel('one-photo')" icon="delete" size="mini" class="one-photo-del"></el-button>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'myPhotoDet',
      data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,

        albumName:'生活相册',
        albumDesc:'这里展示你生活独特的一面吧',

        photo:{
          list:[
          {
            photoLink:require('./album-myPhoto/1.jpg'),
          },
          {
            photoLink:require('./album-myPhoto/2.jpg'),
          },
          {
            photoLink:require('./album-myPhoto/1.jpg'),
          },
          {
            photoLink:require('./album-myPhoto/2.jpg'),
          },
          {
            photoLink:require('./album-myPhoto/1.jpg'),
          },
          {
            photoLink:require('./album-myPhoto/2.jpg'),
          },
          {
            photoLink:require('./album-myPhoto/1.jpg'),
          },
          {
            photoLink:require('./album-myPhoto/2.jpg'),
          },
          {
            photoLink:require('./album-myPhoto/1.jpg'),
          },
          {
            photoLink:require('./album-myPhoto/2.jpg'),
          },
          {
            photoLink:require('./album-myPhoto/1.jpg'),
          },
          {
            photoLink:require('./album-myPhoto/2.jpg'),
          },
          ],
        },
      }
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      photoDel(id){
        this.$confirm('此操作将永久删除该照片, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var album=document.getElementById(id);
          album.parentNode.removeChild(album);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
    }
  }

</script>

<style scoped>
  #photo-det {
    width: 700px;
    height: 300px;
  }
  .photo-display img{
    width: 147px;
    height: 147px;
    float: left;
    padding-right: 0px;
    padding-bottom: 15px;
  }
  .photo-upload{
    float: left;
    padding-right: 20px;
  }
  div.photo-name{
    font-size: 18px;
    font-weight: bold;
    padding: 15px 0px 10px 15px;
  }
  div.photo-desc{
    padding: 0px 0px 20px 15px;
    font-size: 15px;
    float: left;
  }
  div.photo-butt{
    position: relative;
    top: -20px;
    left: 300px;
  }
  .photo-other{
  }
  .one-photo-del{
    display: block;
    float: left;
    position: relative;
    left: -30px;
    top: 5px;
    background-color: rgba(0, 0, 0, 0.4); 
    border: none;
  }

</style>